<template>
	<div id="publish">
		<!--  添加弹窗  -->
		<div class="button">
			<el-button size="mini" type="primary" @click="handleAdd">添加用户发布信息</el-button>
		</div>
		<!--  Table表格  -->
		<el-table :data="tableData" style="width:  100%" :header-cell-style="{background:'#2a9fc9'  ,color:'#000000'}">
			<el-table-column align="center" label="性别" prop="sex"></el-table-column>
			<el-table-column align="center" label="年龄" prop="age"></el-table-column>
			<el-table-column align="center" label="身高" prop="high"></el-table-column>
			<el-table-column align="center" label="学历" prop="edubg"></el-table-column>
			<el-table-column align="center" label="收入" prop="inmoney"></el-table-column>
			<el-table-column align="center" label="工作地区" prop="address"></el-table-column>
			<el-table-column align="center" label="婚姻状况" prop="marry"></el-table-column>
			<el-table-column align="center" label="车房状况" prop="chefang"></el-table-column>
			<el-table-column align="center" label="操作" style="width:30px">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" circle icon="el-icon-delete" @click="handleDel(scope.row)"></el-button>
					<el-button type="primary" size="mini" circle icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
						<el-dialog :visible.sync="addeditPublish" width="60%" :before-close="handleClose2">
							<el-form ref="form" :model="form" :visible.sync="addeditPublish" :rules="rules">
								<el-form-item label="性别" prop="sex" :rules="[{required:true,message:'请输入性别'}]">
									<el-input placeholder="请输入性别" v-model="form.sex"></el-input>
								</el-form-item>
								<el-form-item label="年龄" prop="age" :rules="[{required:true,message:'请输入年龄'}]">
									<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
								</el-form-item>
								<el-form-item label="身高" prop="high" :rules="[{required:true,message:'请输入身高'}]">
									<el-input placeholder="请输入身高" v-model="form.high"></el-input>
								</el-form-item>
								<el-form-item label="学历" prop="edubg" :rules="[{required:true,message:'请输入学历'}]">
									<el-input placeholder="请输入学历" v-model="form.edubg"></el-input>
								</el-form-item>
								<el-form-item label="收入" prop="inmoney" :rules="[{required:true,message:'请输入收入'}]">
									<el-input placeholder="请输入收入" v-model="form.inmoney"></el-input>
								</el-form-item>
								<el-form-item label="工作地区" prop="address" :rules="[{required:true,message:'请输入工作地区'}]">
									<el-input placeholder="请输入工作地区" v-model="form.address"></el-input>
								</el-form-item>
								<el-form-item label="婚姻状态" prop="marry" :rules="[{required:true,message:'请输入婚姻状态'}]">
									<el-input placeholder="请输入婚姻状态" v-model="form.marry"></el-input>
								</el-form-item>
								<el-form-item label="住房" prop="chefang" :rules="[{required:true,message:'请输入住房状态'}]">
									<el-input placeholder="请输入住房状态" v-model="form.chefang"></el-input>
								</el-form-item>
							</el-form>
							<span slot="footer" class="dialog-footer">
								<el-button @click="cancel2">取 消</el-button>
								<el-button type="primary" @click="sure">确 定</el-button>
							</span>
						</el-dialog>
				</template>
			</el-table-column>
		</el-table>
		<!--  添加弹窗  -->
		<el-dialog :visible.sync="addPublish" width="60%" :before-close="handleClose">
			<el-form ref="form" :model="form" :visible.sync="addPublish" :rules="rules">
				<el-form-item label="性别" prop="sex" :rules="[{required:true,message:'请输入性别'}]">
					<el-input placeholder="请输入性别" v-model="form.sex"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age" :rules="[{required:true,message:'请输入年龄'}]">
					<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
				</el-form-item>
				<el-form-item label="身高" prop="high" :rules="[{required:true,message:'请输入身高'}]">
					<el-input placeholder="请输入身高" v-model="form.high"></el-input>
				</el-form-item>
				<el-form-item label="学历" prop="edubg" :rules="[{required:true,message:'请输入学历'}]">
					<el-input placeholder="请输入学历" v-model="form.edubg"></el-input>
				</el-form-item>
				<el-form-item label="收入" prop="inmoney" :rules="[{required:true,message:'请输入收入'}]">
					<el-input placeholder="请输入收入" v-model="form.inmoney"></el-input>
				</el-form-item>
				<el-form-item label="工作地区" prop="address" :rules="[{required:true,message:'请输入工作地区'}]">
					<el-input placeholder="请输入工作地区" v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="婚姻状态" prop="marry" :rules="[{required:true,message:'请输入婚姻状态'}]">
					<el-input placeholder="请输入婚姻状态" v-model="form.marry"></el-input>
				</el-form-item>
				<el-form-item label="住房" prop="chefang" :rules="[{required:true,message:'请输入住房状态'}]">
					<el-input placeholder="请输入住房状态" v-model="form.chefang"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="identify">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import axios from 'axios';
axios.defaults.baseURL = '/api'
	export default {
		data() {
			return {
				addPublish: false,
				addeditPublish: false,
				tableData: [],
				title: "",
				form: {
					sex: "",
					age: "",
					high: "",
					edubg: "",
					inmoney: "",
					address: "",
					marry: "",
					chefang: ""
				},
				rules: {
					sex: [{
						required: true,
						message: "请输入用户性别"
					}],
					age: [{
						required: true,
						message: "请输入用户年龄"
					}],
					high: [{
						required: true,
						message: "请输入用户身高"
					}],
					edubg: [{
						required: true,
						message: "请输入用户学历"

					}],
					inmoney: [{
						required: true,
						message: "请输入用户收入"
					}],
					address: [{
						required: true,
						message: "请输入约会状态"
					}],
					marry: [{
						required: true,
						message: "请输入用户婚姻状况"
					}],
					chefang: [{
						required: true,
						message: "请输入用户车房情况"
					}],
				},
			}
		},
		watch: {
			'form.state'(newValue) {
				this.form.state = newValue.toString();
			},
			'form.vip'(newValue) {
				this.form.vip = newValue.toString();
			}
		},
		methods: {
			handleAdd() {
				this.addPublish = true;
			},
			handleClose() {
				this.$refs.form.resetFields();
				this.addPublish = false;
			},
			handleClose2() {
				this.addeditPublish=false;
			},
			//添加
			identify(){
					axios.post("/insert", this.form, {
						headers: {
							'Content-Type': 'application/json'
						}
					}).then((res) => {
						console.log("123",res)
						if (res.status === 200) {
							this.tableData = res.data;
							if (res.data === "用户添加成功") {
								this.addPublish = false;
								alert("用户添加成功");
							} else {
								this.addPublish = false;
								alert("用户添加失败");
							}
						}
					});
			},
			
			cancel() {
				this.handleClose();
			},
			getLesson() {
				axios.get("http://123.57.174.220:8085/getAllUsermsg", {
					params: {
						page: 1,
						pageSize: 10
					}
				}).then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.tableData = res.data;
						
					}
				});
			},
			handleDel(row) {
				axios.delete(`/deleteUsermsg/${row.id}`).then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.getLesson()
					}
				});
			},
			handleEdit(row) {
				//  TODO：根据实际情况修改参数名称和行为。这里仅为示例。
				this.form = row;
				//  this.form=JSON.parse(JSON.stringify(row));
				this.addPublish = true;
			}
		},
		mounted() {
			this.getLesson();
		}
	}
</script>
<style scoped>
	.button {
		margin-bottom: 15px;
	}
</style>
